<template>
	<view class="find">
		<view v-if="!onlyFollow || videoList.length>0">
			<image
					v-if="follow && !onlyFollow"
					@tap="follow=false"
					src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/follow3.png"
				   style="position: fixed;top: 30upx;width: 633upx;height:236upx;z-index:9999;right:0"
			></image>
			<course-index type="index"></course-index>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<!--分享-->
					<bady-info @close="babyShow=false" :show="babyShow"></bady-info>
					<record-share :show="dialog_share" desc="让大家一起听听"  title="分享给好友" :record_id="getCurrentRecordId()" :subject_id="getCurrentSubjectId()" @cancel="closeShare" ></record-share>
					<view class="page-section-spacing">
						<swiper
								class="swiper"
								:current="current"
								:vertical="vertical"
								:indicator-dots="indicatorDots"
								:autoplay="autoplay"
								:interval="interval"
								:duration="duration"
								@change="swiperChange"
								:style="{height: swiperHeight}"
						>
							<swiper-item :id="'videoitem_' + index" v-for="(item, index) in videoList" :key="index" >




								<uni-swiper-dot :info="item.subject.images" :dots-styles="dotsStyles" :current="currentImg" :mode="dot">
								<!--节省资源. 只有当前的采用swiper-->
								<swiper @tap="pause" @change="changeImg" :current="currentImg"  style="height: 100vh;width: 100vw"  >
									<view style="position: fixed;background:linear-gradient( rgba(85,85,85,0.5),rgba(112,112,112,0));top: 0;width: 2000%;height: 20%;z-index: 9"></view>
									<view style="position: fixed;background:linear-gradient(rgba(112,112,112,0),rgba(112,112,112,0.3), rgba(85,85,85,0.5));;bottom: 0;width: 2000%;height: 80%;z-index: 9"></view>

									<!--v-show="currentImg==key"-->
										<swiper-item v-for="(images,key) in item.subject.images" :key="key">
											<image style="width: 750upx; height: 1206upx;" :class="ipad" :src="item.subject.images_link.large[key]"
												   mode="scaleToFill"></image>
										</swiper-item>

								</swiper>
								</uni-swiper-dot>



								<view class="plays" v-if="playStatus==0" >
									<view class="play_begin" @click="play" >
										<text class="iconfont play">&#xe619;</text>
									</view>
								</view>
								<view class="plays" v-if="playStatus==1" >
									<view class="play_begin" @click="goon" >
										<text class="iconfont play">&#xe619;</text>
									</view>
								</view>

								<view class="tools_right" style="z-index: 99" v-if="toolShow">
									<view class="tools_r_li" @tap="like(index) ">
										<text class="iconfont play_icon" :class="item.is_like ? 'follow_active' : ''">
											&#xe61e;
										</text>
										<view class="tools_r_num">{{showNumber(item.likes_count+item.base_like)}}</view>
									</view>
									<view class="tools_r_li" @tap="openRreview(item.id)">
										<text class="iconfont play_icon">&#xe618;</text>
										<view class="tools_r_num">{{showNumber(item.reviews_count)}}</view>
									</view>
									<view class="tools_r_li">
										<image @tap="share" style="width:60upx;height:48upx" src="../../static/img/share.png" />
										<view class="tools_r_num">{{showNumber(item.sharing_count)}}</view>
									</view>
								</view>
								<!-- 底部作品描述 -->
								<view class="production_box"  v-if="toolShow">
									<view class="production_gushiname font-semibold">{{ item.title }}</view>
									<view class="production_name font-medium">@{{ item.user.name }}</view>
									<view class="production_des font-regular">
										{{ item.content }}
									</view>
									<navigator :url="'/pages/story/record/index?id='+item.subject_id" @tap="stop">

										<text style="float: right;font-size: 26upx;position: relative;left: 170upx;width:120upx;top:10upx;text-align: center" class="font-regular">
											{{currentImg+1}}/{{item.subject.images.length}}
										</text>
										<view class="i_to_lu font-medium">我也要说</view>
										<!-- #ifdef MP-WEIXIN -->
										<!--<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">button</button>-->
										<!-- #endif -->
									</navigator>


								</view>
								<navigator class="load"  @tap="stop" v-if="toolShow" :url="'/pages/my/friend_dynamics/index?id='+item.user.id">
									<image :src="item.user.avatar" class="img" mode="scaleToFill"></image>
								</navigator>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<!--评论部分-->
			<view class="find_message"  style="z-index: 999"  v-if="toolShow">
				<uni-popup ref="message" :maskClick="false" type="bottom">
					<view class="popup_box" >
						<view class="title_num font-regular">{{showNumber(reviewList.meta.total)}}条评论</view>
						<text class="iconfont close_icon" @click="closeMessageBox">&#xe615;</text>
						<view class="list_box">
							<view class="list" v-for="(item,key) in reviewList.data" :key="key">
								<view class="head_img">
									<image :src="item.user.avatar" class="img" mode="scaleToFill"></image>
								</view>
								<view class="mes_b" >
									<view class="name" >
										<view @tap="tapReplay(item,item.id)">
											<text class="font-regular">{{item.user.name}}</text>
											<text class="font-light" style="opacity: 0.5">{{timeTostring(item.created_at_timestamp)}}</text>
										</view>
										<view class="zan" @tap="reviewLike(item.id)">

											<view v-if="item.is_like_user"   class="iconfont zans">&#xe61e;</view>
											<view v-else  class="iconfont zans">&#xe61e;</view>
											<view>{{item.like_user_count}}</view>
										</view>
									</view>
									<view class="des">
										<view  @tap="tapReplay(item,item.id)" class="font-regular">{{item.content}}</view>

										<text class="delete font-regular" @tap="deleteReview(item.id)" v-if="canDel(item)">删除</text>
									</view>
									<view class="hui_fu" v-for="(citem,ckey) in item.children" :key="ckey" @tap="tapReplay(citem,item.id)">
										<text class="hui_fu_name font-regular">回复{{citem.to_user.name}}：</text>
										<text class="hui_fu_des font-regular">{{citem.content}}</text>
										<text class="delete font-regular"  @tap="deleteReview(citem.id)" v-if="canDel(citem)">删除</text>
									</view>

								</view>
							</view>
							<!--						<input class="uni-input" placeholder-class="input-placeholder" type="text" placeholder="试着夸赞一下吧～" />-->
							<view class="input_box">
								<input class="input_w" placeholder-class="input-placeholder"  v-model="reviewContent" type="text"
									   :placeholder="replayPlaceholder"/>
								<view class="input_btn font-medium" @tap="sendReview">发送</view>
							</view>
						</view>

					</view>
				</uni-popup>
			</view>
		</view>
		<view v-else >
			<view style="position: fixed;background:linear-gradient( rgba(85,85,85,0.5),rgba(112,112,112,0));top: 0;width: 2000%;height: 20%;z-index: 9"></view>
			<view class="font-regular"
				  style="color:#664E37;font-size: 26upx;text-align: center;margin-top:580upx;opacity: .5">
				暂时没有新的关注<br />快去关注你喜欢的朗读人吧~
			</view>
			<button class='pop_btn' @tap="redirect('/pages/index/index')" style="margin-top: 20upx" plain="true">
				去关注
			</button>
		</view>

	</view>
</template>

<script>
  import {uniPopup,uniIcons,uniSwiperDot} from "@dcloudio/uni-ui"

  import RecordShare from "../dialog/record/share"
  var sys = uni.getSystemInfoSync();
  var sysheight = sys.windowHeight;
  var baseCenter = sys.windowHeight / 2;
  import Request from '@/utils/request.js'
  import tool from '@/utils/tool.js'
  import BadyInfo from "../dialog/baby/badyInfo"
  import CourseIndex from "../../components/course/index"
  let record;
  let bgm;

  export default {
    components: {CourseIndex, BadyInfo, uniPopup,uniIcons,RecordShare,uniSwiperDot},
	props:{
      	record_id:{
      	  default:0,
		  type:Number,
		},
		//是否只查看关注的
		onlyFollow:{
			default:0,
			type:Number,
		},
	},
    data() {
      return {
        follow:false,
        dot:'dot',
        dotsStyles: {
          width: 8,
          height: 8,
          bottom: 0,
          selectedBackgroundColor: '#fcb300',
          backgroundColor: '#ffffff',
          border: '1px solid #ffffff',
          selectedBorder: '1px solid #ffffff',
        },
        playStatus:0 ,//0 未播放, 1暂停 10 播放中
		reviewList: {
          meta:{
            total:0,
		  }
		}, ipad:'iphone',
		loginUserId:0,
        babyShow:false,
        dialog_share:false,//分享是否显示
		autoChangeFlag:1,//标记下是自动还是手动翻页的
        current: 0,
        currentImg: 0,
        swiperHeight: '',
        indicatorDots: false,
        autoplay: false,
        interval: 2000,
        toolShow:1,
        vertical: true,
        showShareBox: false,
        direction: 1000,
        duration: 800,
        videoList: [],
        page: 1,
        playIngIndex: 0,
        videoContext: null,
        timer: null,


		currentReviewId:0,

        intervalFlag:null,
		//批量
        reviewContent:'',
		replay:{},
      };
    },
	computed:{
      replayPlaceholder:function () {
        if(this.replay.name)
          return '回复 '+this.replay.name +':';
	  else
		return '试着夸赞一下吧～';
      },
	  currentItem:function () {
		return this.videoList[this.current];
      }
	},
    methods: {
      showFollow(){
        this.follow=true
		setTimeout(()=>{
          this.follow=false;
		},4000)
	  },
      canDel(item){
        // console.log(this.loginUserId,item.user.id)
        if(this.loginUserId==item.user.id){
          return true;
		}
		if(this.loginUserId == this.videoList[this.current].user_id){
            return true;
		}
		return false;
	  },
      me(user_id){
        let user = uni.getStorageSync('user');
        if(user_id =  user.id){
          return true;
		}
		return false;
	  },

      closeShare(){
        this.dialog_share=false;
	  },
      getCurrentRecordId(){
		if(!this.videoList[this.current])
		  return '';
		this.$emit('shareContent',this.videoList[this.current]);
        return this.videoList[this.current].id;
	  },
      getCurrentSubjectId(){
        if(!this.videoList[this.current])
        	return '';
        return this.videoList[this.current].subject_id;
	  },
      share(){
        this.dialog_share=true;
        let data = {'record_id': this.videoList[this.current].id, 'to': 1};
        Request.post('/tape/sharing', data);
	  },
      like(index) {
        console.log('like');
        uni.showLoading({
		  'mask':true,
		});
        if (this.videoList[index].is_like) {
          Request.put('/common/like', {
            'target_id': this.videoList[index].id,
            'target_type': 'tape_record',
            'action': 'cancel'
          }).then(() => {
            uni.hideLoading();
            this.videoList[index].is_like = 0;
            this.videoList[index].likes_count--;
          });

        } else {
          Request.put('/common/like', {
            'target_id':this.videoList[index].id,
            'target_type': 'tape_record',
            'action': 'like'
          }).then(() => {
            uni.hideLoading();
            this.videoList[index].is_like = 1;
            this.videoList[index].likes_count++;
          });
        }
      },

      goon(){

        record.play();
        bgm.play();
        this.playStatus=10;
	  },
      pause(){
        console.log('暂停');
        this.playStatus=1;
        bgm.pause();
        record.pause();
	  },
      timeTostring(time){
        return tool.timeToString(time);
	  },
      showNumber(number) {
        return tool.showNumber(number);
      },
	  //点击回复,记录replay_id
      tapReplay(item,replay_id){
		this.replay={
		  'id':item.id,
		  'to_user_id':item.user.id,
		  'name':item.user.name,
		  'replay_id':replay_id
		}
		console.log(this.replay);
	  },
	  //评论
      sendReview(){
        let id = this.videoList[this.current].id;
        let review={
          	'content':this.reviewContent,
		  	'target_id':id,
		  	'target_type':'tape_record'
		};
        review['to_user_id'] = this.videoList[this.current].user_id;
        if(this.replay.replay_id){
          review['reply_id']=this.replay.replay_id;
          review['to_user_id']=this.replay.to_user_id;
		}
		console.log(review,'review');
        Request.post('/common/review/',review).then((res)=>{
			this.openRreview(id);
			this.replay={};
			this.reviewContent='';
			this.videoList[this.current].reviews_count++;
		});
	  },
	  //获取录音
      getRecord() {
        uni.showLoading();
        let api = '/tape/record?status=1&pageSize=3&page=' + this.page;
        //只看关注的
        if(this.onlyFollow){
        	api+= '&follow=1'
		}
        if(this.record_id){
          this.showFollow();
          //第二页不用去加载了
          if(this.page>1){
            return ''
		  }
          console.log(this.record_id,'id');
          api = api+'&id='+this.record_id;
		}

        console.log(api);
        Request.get(api).then((res) => {
			uni.hideLoading();
          console.log(res,'record数据');
          if(this.record_id && res.data.length<1){

            uni.hideLoading();
            uni.showToast({
              'title':'该作品已失效',
              icon:'none',
              duration: 5000,
              complete:()=>{
                // uni.navigateBack();
			  }
            })

            return '';
		  }


          res.data.forEach((value)=>{
            this.videoList.push(value)
		  })
          if(this.page==1){
            this.showFollow();
            this.setMp3(0);
            this.setShareContent();
            this.play();
          }

          // videoList.push()
        });
      },
	  //打开留言
      openRreview(id){
        this.pause()
        uni.showLoading();


        if(id) {
          this.currentReviewId = id
        }else{
          id = this.currentReviewId;
		}

        Request.get('/common/review/combine/tape_record?status=1&id='+id).then((res)=>{
          console.log(res,'review');
		  this.reviewList=res;
          this.$refs.message.open();
          this.replay={};
          uni.hideLoading();
		})
	  },
      getMessage() {
        this.$refs.message.open()
      },
      closeMessageBox() {
        this.$refs.message.close()
      },
      //视频操作
      // onSwipScroll: function(event) {
      // 	this.playIngIndex = event.detail.current;
      // 	this.timer = setTimeout(
      // 			function() {
      // 				this.playVideo();
      // 			}.bind(this),
      // 			200
      // 	);
      // },

	  reviewLike(id){
        Request.post('/review/fabulous',{review_id:id}).then(()=>{
			this.openRreview();
		});
	  },
      deleteReview(id){
        Request.delete('/common/review/'+id).then(()=>{
          this.openRreview();
		})
	  },
		redirect(url){
			uni.navigateTo({
				url:url
			})
		},
      changeShare() {
        this.showShareBox = true;
      },
	  //收到切换
      changeImg(e) {
        if(e.target.current==0){
            bgm.seek(0);
            record.seek(0);
          	console.log('第一页');
            return ;
		}
        let action = this.videoList[this.current].action[e.target.current - 1];
        if (!action)
          return '';
        console.log(action);
        let diffTime = action.time - record.currentTime;
        // console.log(diffTime);

        //如果时间差距了1秒以上.就是手动操作的
        if (Math.abs(diffTime) > 1) {
          console.log('跳转', action.time);

          //200毫秒的防抖
          if (this.autoChangeFlag) {
            bgm.seek(action.time);
            record.seek(action.time);
            this.autoChangeFlag = 0;
            setTimeout(() => {
              this.autoChangeFlag = 1;
            }, 200)
          }

          // this.currentImg = action.current;
          // this.autoChangeFlag=1;
          // console.log(this.currentImg);
        }

      },
	  setShareContent(){
        this.$emit('share',{'title':this.currentItem.title,'path':'pages/index/index?id='+this.currentItem.id,'thumb':this.currentItem.subject.thumb_link.large});
	  },
      babyinfo(current){
        let playNumber = uni.getStorageSync('playNumber');
        playNumber = playNumber*1 +1;
        uni.setStorageSync('playNumber',playNumber);
        let user = uni.getStorageSync('user');
        //浏览超过30 并且未添加的宝宝信息的
		console.log(playNumber,user.baby);
        if(playNumber>30 && (!user.baby || user.baby.length<1)){
			this.babyShow=true;
		}
	  },
	  //幻灯片滑动,设置录音
      swiperChange(e) {
  		this.stop();
        //提前加载
		this.toolShow=0;
        if(e.target.current>(this.videoList.length-3)){
          	this.page++;
          	this.getRecord();
		}
        this.current=e.target.current;
        this.setShareContent();
        this.setMp3(this.current);


        this.babyinfo(this.current);

        this.play();
        setTimeout(()=>{

          this.toolShow=1
		},500)
      },
	  // 播放录音
      play(){
        this.uploadPlaying();
        this.setMp3(this.current);
        record.play();
        bgm.play();
        this.playStatus=10;
      },
	  //播放次数
      uploadPlaying() {
        if(this.loginUserId<1){
          return '';
		}
        let data = {'record_id': this.videoList[this.current].id, last_time: 1};
        Request.post('/tape/playing_history', data);
      },
	  //停止
      stop(){
        record.stop();
        this.playStatus=0;
        this.currentImg=0;
      },
	  //设置mp3
      setMp3(current){
        this.currentImg=0;
        console.log(current);
        if(bgm){
          bgm.destroy();
        }
        if(record){
          record.destroy();
        }

        record = uni.createInnerAudioContext()

        bgm = uni.createInnerAudioContext()

        record.onCanplay(()=>{
          console.log('录音可以播放');
        })
        record.onPlay(()=>{
          console.log('录音播放');
        })
        bgm.onCanplay(()=>{
          	console.log('bgm可以播放');
        })
        bgm.onPlay(()=>{
          	console.log('bgm播放');
        })
        record.onStop(()=>{
          this.playStatus=0;
          bgm.stop();
        })
        record.onEnded(()=>{
          this.playStatus=0;
          bgm.stop();
          //分享的
          if(this.record_id){

		  }else{
            this.current++;
		  }

          setTimeout(()=>{
            this.play();
		  },1500)
        })

        record.onError((res) => {
          console.log(res.errMsg);
          console.log(res.errCode);
        });

        record.src = this.videoList[current].original_record_link;
        record.loop = false;
        record.seek(0);//进度条重置0
        record.volume = 1
		record.obeyMuteSwitch=false;
        bgm.obeyMuteSwitch=false;
        bgm.title = 'parrot';
        bgm.src = this.videoList[current].subject.bgm_link;
        bgm.loop = true;
        bgm.seek(0);//进度条重置0
        bgm.volume = 0.1;
      }

    },
    mounted() {
      let _self = this;
      uni.getSystemInfo({
        success: function (res) {
			if (res.windowWidth / res.windowHeight > 0.7) {
				_self.ipad = 'ipad';
			}
          _self.swiperHeight = res.windowHeight + 'px';
        }
      });


      let user = uni.getStorageSync('user');
      if(user){
        this.loginUserId = user.id;
	  }



	  //定时任务跑脚本
      this.intervalFlag=setInterval(()=>{
        // console.log(record.currentTime,'当前时间')
        if(bgm && this.playStatus>1){

          for(let key in this.videoList[this.current].action){
            let action = this.videoList[this.current].action[key];

            // console.log(action);
            if(record.currentTime >= 0 &&  record.currentTime  < 1 ){
              this.currentImg = 0;
              return '';
            }
            if(action && record.currentTime > action.time){
              console.log(key,'自动翻页');
              this.currentImg = action.current;
            }
          }
        }
      },200)


      this.getRecord();
      // this.playVideo();
    },
    beforeDestroy(){
      this.stop();
      clearInterval(this.intervalFlag);
    }
  };
</script>

<style lang="scss">
    .follow_active{
        color: #fcb300;
    }
	.uni-swiper__dots-box{
		top: 90upx;
		bottom: 0px;
		height: 40upx;
	}
	.ipad{
		max-width: 80vw;
		max-height: 100vh;
		margin-left: 10vw;
	}
	.find{
		.find_message{
			.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
				height: 870upx;

				border-radius: 40upx 40upx 0 0;
				background-color:$uni-color-fffbf0;
			}
			.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
				padding: 0upx;
			}
			.popup_box{
				width: 100%;
				height: 100%;
				padding: 0 50upx;
				box-sizing: border-box;
				position: relative;
				.close_icon{
					position: fixed;
					z-index: 100;
					top: 26upx;
					right: 61upx;
					color: $uni-color-876a48;
					font-size: 30upx;
					transform: rotate(-45deg);
				}
				.title_num{
					box-sizing: border-box;
					width: 650upx;
					position: fixed;
					top: 0px;
					left: 0px;
					z-index: 100;
					height: 84upx;
					font-size:$uni-font-size-16 ;
					color: $uni-color-664e37;
					line-height: 84upx;
					border-bottom: 2upx solid #e0e0e0;
					margin: 0 50upx;
					text-align: center;
					background-color: $uni-color-fffbf0;
				}
				.list_box{
					overflow-y: scroll;
					padding:104upx 0 170upx ;
					.list{
						display: flex;
						margin-top: 45upx;
						.head_img{
							width: 70upx;
							height: 70upx;
							border-radius: 50%;
							box-sizing: border-box;
							border: 4upx solid $uni-color-fcb300;
							.img{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.mes_b{
							width: 556upx;
							box-sizing: border-box;
							padding: 20upx;
							font-size: $uni-font-size-14;
							color: $uni-color-664e37;
							margin-left: 20upx;
							background: white;
							border-radius:10upx ;
							box-shadow: 0upx 0upx 6upx rgba(0, 0, 0, 0.16);
							.name{
								font-size: $uni-font-size-13;
								color:$uni-color-876a48 ;
								line-height: 38upx;
								display: flex;
								justify-content: space-between;
								text{
									position: relative;
									z-index: 0;
									font-size: $uni-font-size-sm;
									color:$uni-color-876a48 ;
									opacity: 0.5;
									padding-left: 15upx;
								}
							}
							.zan{
								display: flex;
								color:$uni-color-876a48 ;
								font-size: 24upx;
								.zans{
									font-size: 24upx;
									padding-right: 4upx;
								}
							}
							.delete{
								font-size: $uni-font-size-sm;
								color: #f04545;
								padding-top: 10upx;
								position: relative;
								top:-2upx;

							}
							.hui_fu{
								.hui_fu_name{
									color: #fcb300;
								}
								.hui_fu_des{
									padding-right: 11upx;
								}
							}
						}
					}
				}
				.input_box{
					box-sizing: border-box;
					position: fixed;
					bottom: 0upx;
					left: 0upx;
					width: 100%;
					height: 140upx;
					box-shadow: 0upx 0upx 6upx rgba(0, 0, 0, 0.06);
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30upx;
					box-sizing: border-box;
					.input-placeholder{
						font-size: $uni-font-size-13;
						color: $uni-color-664e37;
						opacity: 0.5;
					}
					.input_w{
						box-sizing: border-box;
						width: 500upx;
						height: 80upx;
						background-color: $uni-color-fffbf0;
						border-radius: 56upx;
						padding-left: 30upx;
						font-size: $uni-font-size-13;
						color: $uni-color-664e37;
					}
					.input_btn{
						width:160upx ;
						height: 80upx;
						background-color: $uni-color-fcb300;
						color: #fff;
						font-size: $uni-font-size-base;
						text-align: center;
						line-height: 80upx;
						border-radius: 56upx;
					}
				}
			}

		}
		.swipe{
			width: 100%;
			height: 100%;
			.bg_img{
				width: 100%;
				height: 100%;
			}

		}
		.liked{
			color:#fcb300
		}
		/*.video {*/
		/*	object-fit: fill !important;*/
		/*	z-index: 999;*/
		/*	width: 100%;*/
		/*	height: 100%;*/
		/*	position: absolute;*/
		/*	left: 0;*/
		/*	top: 0;*/
		/*	overflow: hidden;*/
		/*}*/
		.plays{
			position: absolute;
			top: 0upx;
			left: 0upx;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.play_begin{
				z-index: 100;
				width:155upx ;
				height:155upx ;
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0.9;
				.play{
					color: $uni-color-fcb300;
					font-size: 66upx;
					position: relative;
					right: -10upx;
				}
			}
		}

		.tools_right {
			z-index: 1001;
			position: absolute;
			right: 53upx;
			bottom: 271upx;
			.tools_r_li {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40upx;
				color: #fff;
				font-size: $uni-font-size-13;
				.play_icon{
					font-size: 55upx;
				}
			}
			.tools_r_li:last-child {
				margin-bottom: 0px;
			}
			.tools_r_num{
				color: #F4F5F6;
				height: 48upx;
				line-height: 48upx;
				font-weight: $font-medium;
			}
		}
		.load{
			box-sizing: border-box;
			width: 80upx;
			height: 80upx;
			border: 4upx solid $uni-color-fcb300;
			border-radius: 50%;
			z-index: 100;
			position: absolute;
			right:40upx;
			bottom: 145upx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.production_box {
			width: 520upx;
			z-index: 100;
			position: absolute;
			left:40upx;
			bottom: 40upx;
			color: #fff;
			box-sizing: border-box;
			.production_gushiname{
				font-size: $uni-font-size-base;
				line-height: 48upx;
				font-weight: 800;
			}
			.production_name {
				font-size: $uni-font-size-13;
				line-height: 38upx;
				padding-bottom: 10px;
				font-weight: 800;
			}

			.production_des {
				width: 100%;
				font-weight: 800;
				font-size: $uni-font-size-13;
				line-height: 38upx;
				overflow: hidden;
				display: -webkit-box;//将元素设为盒子伸缩模型显示
				-webkit-box-orient: vertical;//伸缩方向设为垂直方向
				-webkit-line-clamp: 3;//超出3行隐藏，并显示省略号
			}
			.i_to_lu{
				width:200upx ;
				height: 66upx;
				background-color: $uni-color-fcb300;
				border-radius: 34upx;
				text-align: center;
				line-height: 66upx;
				font-size: 30upx;
				margin-top: 40upx;
				font-weight: 800;
			}
		}

	}

</style>
